<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>使用 passive 改善滚屏性能</title>
    <link rel="stylesheet" href="../../styles/normalize.css" />
    <style type="text/css">
      .box {
        height: 1000px;
      }
    </style>
  </head>
  <body>
    <div class="box">1</div>
    <script>
      /* 检测浏览器是否支持该特性 https://www.51cto.com/article/808500.html */
      let passiveIfSupported = false;

      try {
        window.addEventListener(
          "test",
          null,
          Object.defineProperty({}, "passive", {
            get() {
              passiveIfSupported = { passive: true };
            },
          })
        );
      } catch (err) {}

      window.addEventListener(
        "scroll",
        (event) => {
          /* do something */
          // 不能使用 event.preventDefault();
          // event.preventDefault();
        },
        passiveIfSupported
      );
    </script>
  </body>
</html>
